import React from 'react';
import { Img } from './Img';
// 临时定义，避免导入错误
const R = {
  publics: {
    placeholder: () => 'https://via.placeholder.com/150',
    error: () => 'https://via.placeholder.com/150/ff0000',
    arc: () => 'https://via.placeholder.com/150',
    arrowDown: () => 'https://via.placeholder.com/150',
  },
};
import { FV, H, HC, HCC, V } from './containers';
import { TContainerProps, TStringNumber } from './Types';
import { ColorValue } from 'react-native';
import { TT } from './Texts';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

export interface TEarProps extends TContainerProps {
  /**
   * Ear background color
   */
  ebg?: ColorValue;
  /**
   * Ear borderRadius
   */
  ebr?: TStringNumber;
  children?: React.ReactNode;
  /**
   * Ear show sd
   */
  ssd?: boolean;
}
/**
 * 耳朵形状（不带覆盖）
 */
export function Ear({
  ebg = '#FFF',
  ebr = 10,
  ssd = true,
  children,
  ...props
}: TEarProps) {
  return (
    <H ai="fe" ty="0.4" {...props}>
      <Img tx="0.4" src={R.publics.arc()} wh={ebr} rt="180deg" z="1" tc={ebg} />
      <HC
        pv={6}
        br={[10, 10]}
        bg={ebg}
        sd={!!ssd ? 'top' : undefined}
        z="0"
        fg={props.fg}
        minW="44"
      >
        {children}
      </HC>
      <Img
        tx="-0.4"
        src={R.publics.arc()}
        wh={ebr}
        rt="180deg"
        sx="-1"
        tc={ebg}
      />
    </H>
  );
}

export interface TEarTabProps extends Omit<TEarProps, 'ebg' | 'children'> {
  tc?: ColorValue;
  tabs: number;
  bottomSafe?: boolean;
  current?: number;
  onClose?: () => void;
  onTab?: (tab: number) => void;
  bgForTab?: (tab: number) => ColorValue;
  children?: ((tab: number) => React.ReactNode) | React.ReactNode;
  title?:
    | string
    | React.ReactNode
    | ((tab: number) => string | React.ReactNode);
}

const dftBgForTab = () => '#FFF';

export function EarTab({
  ebr = 10,
  bgForTab = dftBgForTab,
  ...props
}: TEarTabProps) {
  const arr = React.useMemo(() => Array(props.tabs).fill(0), [props.tabs]);
  let [current, setCurrent] = React.useState(0);
  const bottom = useSafeAreaInsets().bottom;
  if (props.current) {
    current = props.current;
  }
  return (
    <>
      <HC pointerEvents="box-none">
        {arr.map((_, idx) => {
          const bg = bgForTab(idx);
          const onTab = () => {
            if (arr.length === 1) {
              props.onTab ? props.onTab(idx) : props.onClose && props.onClose();
            } else {
              props.onTab ? props.onTab(idx) : setCurrent(idx);
            }
          };
          let titleView =
            typeof props.title === 'function' ? props.title(idx) : props.title;
          if (!titleView || typeof titleView === 'string') {
            titleView = (
              <HC br={[ebr, ebr]} ml={idx > 0 ? 2 * +ebr : 0}>
                {idx === 0 && (
                  <V ml={ebr} onPress={props.onClose}>
                    <Img src={R.publics.arrowDown()} wh="24" tc={props.tc} />
                  </V>
                )}
                <HC ml={ebr} mr="16" onPress={onTab} minH="24">
                  <TT fw="700" c={props.tc}>
                    {titleView}
                  </TT>
                </HC>
              </HC>
            );
          } else {
            titleView = React.cloneElement(titleView as any, {
              onPress: onTab,
              nf: props.tabs > 1,
            });
          }
          const z = current === idx ? 10 : -Math.abs(current - idx);
          const ml = idx === 0 ? 0 : -3 * +ebr;
          return (
            <Ear key={idx} ml={ml} z={z} ebg={bg} ebr={ebr} fg={idx > 0} as="s">
              {titleView}
            </Ear>
          );
        })}
      </HC>
      <V bg={bgForTab(current)} h="12" mb="-12" sd="top" z="-1" />
      <V h={props.h}>
        {arr.map((_, idx) => {
          const z = current === idx ? 10 : -Math.abs(current - idx);
          const bg = bgForTab(idx);
          const pos = current === idx ? undefined : 0;
          return (
            <FV pos={pos} key={idx} bg={bg} z={z} p={props.p}>
              {typeof props.children === 'function'
                ? props.children(idx)
                : props.children}
              {props.bottomSafe && <V h={bottom} bg={bg} />}
            </FV>
          );
        })}
      </V>
    </>
  );
}
